<template>
  <div class="right-open white-bg-page">
    <div class="right-open-header">升级会员</div>
    <div class="vip-confirm_content">
      <div class="content-left">
        <img :src="rightItem.img"/>
      </div>
      <div class="content-right">
        <p class="content-title">解锁[{{ rightItem.name }}]</p>
        <p class="right-describe">{{ rightItem.describe }}</p>
        <p class="right-title">热门会员权益</p>
        <div>
          <ul class="rights-list">
            <li v-for="item in rights" :key="item.id" class="rights-item">
              <div class="img-wrap"><img :src="item.p_icon" /></div>
              <pre class="rights-name">{{ item.name }}</pre>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="right-open-footer">
      <div class="right-open-btn" @click="openBuyPage">
        <i class="open-btn-icon"></i>
        <div>
          <p class="open-btn-name">解锁{{ rightItem.name }}</p>
          <p>开通待办权益包享有更多权益</p>
        </div>
      </div>
    </div>
    <el-dialog custom-class="right-open-dialog"
      :visible.sync="showDialog"
      width="350px">
    <template #title>
      <span class="fb">
        解锁权益
      </span>
    </template>
    <div class="msg-content">
      <svg-icon iconClass="error" className="msg-content_icon"/>
      <div>
        不解锁将无法使用【月视图】<br>仅可使用【日、周清单视图】
      </div>
    </div>
    <div slot="footer" class="right-open-box">
      <el-button size="small" class="right-btn-cancel" @click="closeDialog" round>暂不解锁</el-button>
      <el-button type="primary" class="right-btn-open" size="small" @click="openCoupon" round>解锁月视图<i v-if="hasCoupon" class="popover">领优惠券</i></el-button>

    </div>
  </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { isPassVersion } from '@/utils/judge'
import { getPackageByPid } from '@/api/rights'
import { getCouponList } from '@/api/coupon'
import { getCidByPkg } from '@/utils/costum'
export default {
  name: 'RightOpen',
  data () {
    return {
      rightId: '20001',
      showDialog: false,
      hasCoupon: false,
      rightObj: {
        '20001': { id: '20001', name: '设置自定义重复周期', img: '/static/right-info/repeat.png', describe: '自定义设置待办重复，满足您的每一个场景需求，轻松计划事项' },
        '20008': { id: '20008', pointCode: 8115, reportCode: 8115, name: '无限创建重复待办', img: '/static/right-info/repeat.png', describe: '非会员仅支持创建10条重复待办，会员不限' },
        '20002': { id: '20002', name: '单条待办设置多条提醒', img: '/static/right-info/remind.png', describe: '为单条待办设置多个提醒，保证您不遗漏任何重要事项！' },
        '20003': { id: '20003', name: '多端待办数据同步', img: '/static/right-info/sync-todo.png', describe: '多端待办数据同步，方便随时随地记录待办，您的随手待办助手！' },
        '20004': { id: '20004', pointCode: 8109, reportCode: 8109, name: '无限添加小组件', img: '/static/right-info/widget.png', describe: '非会员仅允许添加一个组件，可升级会员，解锁多样化桌面组件！' },
        '20005': { id: '20005', pointCode: 8107, reportCode: 8107, name: '创建超大容量清单', img: '/static/right-info/todo-list.png', describe: '非会员仅支持2个清单，会员支持99个清单超大容量，再多项目也不怕~' },
        '20006': { id: '20006', pointCode: 8111, reportCode: 8111, name: '月视图', img: '/static/right-info/monthly.png', describe: '使用月视图，您可以总览月度日程，帮助您有条不紊地管理事项！' },
        '20007': { id: '20007', pointCode: 8113, reportCode: 8113, name: '无限导出待办', img: '/static/right-info/export-todo.png', describe: '导出待办，方便作为记录留存，清晰查看月度、年度完成事项，让复盘变得轻松高效！再多项目也不怕~' },
        '20011': { id: '20011', reportCode: 7412, name: '跨象限拖拽待办', img: '/static/right-info/quadrant.png', describe: '快捷调整待办优先级，高效办公~' },
        '20009': { id: '20009', reportCode: 7408, name: '编辑四象限规则', img: '/static/right-info/quadrant.png', describe: '随心定制你的轻重缓急，聚焦你最关心的~' }
      },
      rights: []
    }
  },
  computed: {
    ...mapGetters(['appCfg']),
    rightItem () {
      return this.rightObj[this.rightId] || {}
    }
  },
  async created () {
    this.pkgid = this.$route.query.pkgid || '20000'
    this.rightId = this.$route.query.rightid || '20001'
    this.getPackages()
    await this.$store.dispatch('user/getToken')
    getCouponList({ pkg_id: this.pkgid }).then(res => {
      const data = res.data.list || []
      this.hasCoupon = !!data.length
    })
    this.$xzReg('inform_window_status', res => {
      if (res === 1) {
        if (this.rightId === '20006') {
          this.showDialog = true
        } else {
          this.closeDialog()
        }
      }
    })
  },
  mounted () {
    this.$xz('xz_page_load_finished', 'XZRightOpen')
  },
  methods: {
    getPackages () {
      getPackageByPid({ pid: this.pkgid }).then(res => {
        const data = res.data.data || {}
        const rights = (data.rights || []).filter(item => {
          return isPassVersion(item.min_ver)
        })
        this.rights = rights.slice(0, 5)
      })
    },
    openBuyPage () {
      if (this.rightItem.reportCode) this.$xzAsy('action_report', this.rightItem.reportCode)
      if (this.rightItem.pointCode) this.$xz('xz_set_stat_id', this.rightItem.pointCode)
      const cid = getCidByPkg(this.pkgid)
      this.$xz('xz_BuyVip', JSON.stringify({ cid, pkgid: this.pkgid }))
    },
    openCoupon () {
      if (this.hasCoupon) {
        this.$xz('xz_OpenCouponView')
      } else {
        this.openBuyPage()
      }
      this.closeDialog()
    },
    closeDialog () {
      this.$xz('xz_CloseUpgradeVipWnd')
    }
  }
}
</script>
<style lang="scss">
.right-open{
  padding: 5px;
  // background: linear-gradient(179deg, #F1F4FF 0%, #FFFFFF 100%);
}
.right-open-header{
  height: 22px;
  padding-left: 22px;
  line-height: 22px;
  background: url('~@/assets/vip.png') 0 0 no-repeat;
  background-size: 22px 22px;
  font-size: 12px;
  font-weight: bold;
  color: #53350D;
}
.vip-confirm_content{
  display: flex;
  align-items: center;
  margin-top: 5px;
  padding: 0 18px;
}
.content-left{
  flex: 171px  0 0;
  margin-right: 30px;
  img{
    width: 100%;
  }
}
.content-right{
  flex: 1;
}
.content-title{
  font-weight: bold;
  font-size: 16px;
  color: #462200;
}
.right-describe{
  margin-top: 8px;
  color: #666;
  font-size: 12px;
}
.right-title{
  margin-top: 20px;
  font-size: 12px;
  color: #462200;
}
.rights-list{
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
.rights-item{
  width: 48px;
  flex: 48px 0 0;
  text-align: center;
  .img-wrap{
    width: 26px;
    height: 26px;
    margin: 0 auto;
    padding: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba($color: #FFEAB7, $alpha: 0.4) 0%, rgba($color: #FFC840, $alpha: 0.4) 100%);
    img{
      width: 100%;
      height: 100%;
    }
  }
  .rights-name{
    width: 100%;
    margin-top: 4px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #666;
  }
}
.right-open-footer
.right-open-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 235px;
  height: 52px;
  margin: 18px auto 0;
  background: #2FC670;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  .open-btn-icon{
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 5px;
    background: url('~@/assets/lightning.png') 0 0 no-repeat;
    background-size: 100% 100%;
  }
  .open-btn-name{
    margin-bottom: 2px;
    font-weight: bold;
  }
}
.right-open-dialog {
  background-color: #fff;
  border: none;
  user-select: none;
  border: 1px solid #dbdbdb;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
  border-radius: 6px;
  font-family: "Microsoft YaHei";
  color: #333;
  font-size: 14px;
  .el-dialog__headerbtn .el-dialog__close,
  .el-dialog__body{
    color: #333;
  }
  .right-open-box{
    display: flex;
    justify-content: center;
    align-items: center;
    .right-btn-cancel{
      border: 1px solid #a1a1a1;
      color: #333;
    }
  }
  .msg-content{
    display: flex;
    align-items: center;
    padding-bottom: 15px;
    .svg-icon{
      margin-right: 12px;
      font-size: 32px;
    }
  }
  .right-btn-open{
    position: relative;
  }
  .popover{
    position: absolute;
    top: -22px;
    right: -24px;
    display: inline-block;
    width: 68px;
    height: 26px;
    background: linear-gradient(180deg, #FF8989 0%, #FF4B4B 100%);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,.15);
    line-height: 26px;
    border-radius: 26px;
    &::after{
      content: ' ';
      position: absolute;
      bottom: -10px;
      left: 15%;
      border-width: 6px;
      border-color: transparent;
      border-top-color: #FF4B4B;
      border-style: solid;
    }
  }
}
</style>
